<template>
  <div class="box" ref="box" v-resize="resize">
    <div class="top" ref="top">
      <slot name="top" >
      </slot>
    </div>
    <div class="resize" ref="resize" title="竖直缩放">
    </div>
    <div class="bottom" ref="bottom">
      <slot name="bottom">
      </slot>
    </div> 
  </div>
</template>
<script>
export default {
  name: 'VerticalDrag',
  props: {
    bottomHeight: {
      type: [String, Number],
      default: 0
    },
    minHeight: {
      type: [String, Number],
      default: 30
    }
  },
  data() {
    return {
    }
  },
  mounted() {
    this.resize(true)
  },
  methods: {
    dragControllerDiv(isInit = false) {
      let box = this.$refs.box
      let resize = this.$refs.resize;
      let top = this.$refs.top;
      let bottom = this.$refs.bottom;

      if (this.bottomHeight != 0 && box.offsetHeight > this.bottomHeight && isInit) {
        top.style.height = box.offsetHeight - this.bottomHeight - 5 + 'px'
        bottom.style.height = this.bottomHeight + 'px'
      } else {
        let rawHeight = top.offsetHeight + bottom.offsetHeight + resize.offsetHeight
        let th = top.offsetHeight
        let topNH = th / rawHeight * box.offsetHeight
        top.style.height = topNH + 'px'
        bottom.style.height = box.offsetHeight - topNH - 5 + 'px'
      }

      // 鼠标按下事件
      resize.onmousedown = (e) => {
          //颜色改变提醒
          resize.style.background = '#818181';
          let startY = e.clientY;
          let topHeight = top?.clientHeight
          let bottomHeight = bottom?.clientHeight
          // 鼠标拖动事件
          document.onmousemove = (e) => {
            let endY = e.clientY;
            let moveLen = endY - startY; // （endx-startx）=移动的距离 
            if (topHeight + moveLen < this.minHeight) {
              moveLen = top?.clientHeight - topHeight
            } else if (bottomHeight - moveLen < this.minHeight) {
              moveLen = bottomHeight - bottom?.clientHeight
            }
            top.style.height = topHeight + moveLen + 'px';
            bottom.style.height = bottomHeight - moveLen + 'px';
          };
          // 鼠标松开事件
          document.onmouseup = function (evt) {
              //颜色恢复
              resize.style.background = '#d6d6d6';
              document.onmousemove = null;
              document.onmouseup = null;
              resize.releaseCapture && resize.releaseCapture(); //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉
          };
          resize.setCapture && resize.setCapture(); //该函数在属于当前线程的指定窗口里设置鼠标捕获
          return false;
      };
      
    },
    resize(isInit = false) {
      this.$nextTick(() => {
        this.dragControllerDiv(isInit)
      })
    }
  }
}
</script>
<style scoped>
/* 拖拽相关样式 */
/*包围div样式*/
.box {
    width: 100%;
    height: 100%;
    margin: 0px;
    overflow: hidden;
    background-color: #F1F5F7;
    display: flex;
    flex-direction: column;
}
/*顶部div样式*/
.top {
    width: 100%;
    height: 75%;
}
/*拖拽区div样式*/
.resize {
    cursor: row-resize;
    background-color: #d6d6d6;
    border-radius: 5px;
    height: 5px;
    width: 100%;
}
/*拖拽区鼠标悬停样式*/
.resize:hover {
    color: #444444;
}
/*右侧div'样式*/
.bottom {
  width: 100%;   /*底部初始化宽度*/
  height: calc(25% - 5px);
}
</style>